<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>手写 Mustache 模板引擎：</h1>
    <ul id="ul"></ul>
    <script src="../xuni/bundle.js"></script>
    <script>
        // let tempStr = `
        //     <h1>今天意外收到{{thing}},好{{mood}}啊！</h1>
        // `
        let tempStr = `
            {{#arr}}
                <li>
                    <div class="person">{{name}}的基本信息</div>
                    <div class="info">
                        <p>姓名：{{name}}</p>
                        <p>年龄：{{age}}</p>
                        <p>
                        爱好：
                        {{#hobbies}}
                            <span>{{.}}、</span>
                        {{/hobbies}}
                        </p>
                    </div>
                </li>
            {{/arr}}
        `
        // let data = {
        //     thing: '腾讯offer',
        //     mood: "开心"
        // }
        let data = {
            arr:[
                {name: '小明', age: 12, hobbies: ['篮球','羽毛球','画画']},
                {name: '小红', age: 11, hobbies: ['锻炼']},
                {name: '小强', age: 14, hobbies: ['电脑游戏','骑行']}
            ]
        }
        // 上树
        let domStr = MY_TemplateEngine.render(tempStr, data)
        let ul = document.getElementById('ul')
        ul.innerHTML = domStr
    </script>
</body>
</html>